<template>
  <view class="me-container">
    <!-- 用户信息区域 -->
    <view class="user-info-section">
      <image class="bg-image" src="/static/imgs/assets/下载.jpg" mode="aspectFill"></image>
      <view class="user-info">
        <image class="avatar" src="/static/imgs/assets/header.png" mode="aspectFill"></image>
        <view class="user-details">
          <text class="username">{{userInfo.name}}</text>
          <text class="user-id">ID:{{userInfo.id}}</text>
        </view>
      </view>
    </view>
    
    <!-- 功能入口区域 -->
    <view class="function-section">
      <view class="function-item" @click="navigateTo('/pages/address/address-list')">
        <view class="function-icon">
          <uni-icons type="location" size="24" color="#0086ff"></uni-icons>
        </view>
        <text class="function-text">我的地址</text>
      </view>
      
      <view class="function-item" @click="navigateTo('/pages/shop/shop-list')">
        <view class="function-icon">
          <uni-icons type="star" size="24" color="#0086ff"></uni-icons>
        </view>
        <text class="function-text">我的关注</text>
      </view>
      
      <view class="function-item" @click="navigateTo('/pages/order/order-list')">
        <view class="function-icon">
          <uni-icons type="list" size="24" color="#0086ff"></uni-icons>
        </view>
        <text class="function-text">我的订单</text>
      </view>
    </view>
    
    <!-- 退出登录按钮 -->
    <view class="logout-section">
      <button class="logout-btn" @click="logout">退出登录</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {
        name: '小蓝',
        id: '123456',
        avatar: '/static/assets/imgs/header.png'
      }
    }
  },
  onLoad() {
    this.getUserInfo();
  },
  onShow() {
    this.getUserInfo();
  },
  methods: {
    // 获取用户信息
    getUserInfo() {
      const userInfoStr = uni.getStorageSync('userInfo');
      if (userInfoStr) {
        try {
          const userInfo = JSON.parse(userInfoStr);
          this.userInfo.name = userInfo.username || '用户' + userInfo.phone.substring(7);
          this.userInfo.id = userInfo._id || '123456';
        } catch (e) {
          console.error('解析用户信息失败', e);
        }
      }
    },
    
    // 页面导航
    navigateTo(url) {
      uni.navigateTo({
        url: url
      });
    },
    
    // 退出登录
    logout() {
      uni.showModal({
        title: '提示',
        content: '确定要退出登录吗？',
        success: (res) => {
          if (res.confirm) {
            // 清除登录状态
            uni.removeStorageSync('userInfo');
            
            // 显示退出成功提示
            uni.showToast({
              title: '退出成功',
              icon: 'success',
              duration: 2000
            });
            
            // 跳转到登录页面
            setTimeout(() => {
              uni.navigateTo({
                url: '/pages/login/login'
              });
            }, 2000);
          }
        }
      });
    }
  }
}
</script>

<style lang="scss">
.me-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.user-info-section {
  position: relative;
  height: 300rpx;
  overflow: hidden;
  
  .bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }
  
  .user-info {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    padding: 60rpx 40rpx;
    
    .avatar {
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
      border: 4rpx solid #fff;
    }
    
    .user-details {
      margin-left: 30rpx;
      color: #fff;
      
      .username {
        font-size: 36rpx;
        font-weight: bold;
        margin-bottom: 10rpx;
        display: block;
      }
      
      .user-id {
        font-size: 24rpx;
        opacity: 0.8;
      }
    }
  }
}

.function-section {
  margin: 30rpx;
  background-color: #fff;
  border-radius: 12rpx;
  overflow: hidden;
  
  .function-item {
    display: flex;
    align-items: center;
    padding: 30rpx;
    border-bottom: 1rpx solid #f5f5f5;
    
    &:last-child {
      border-bottom: none;
    }
    
    .function-icon {
      margin-right: 20rpx;
    }
    
    .function-text {
      font-size: 28rpx;
      color: #333;
    }
  }
}

.logout-section {
  margin: 30rpx;
  
  .logout-btn {
    background-color: #0086ff;
    color: #fff;
    border-radius: 12rpx;
    font-size: 30rpx;
    padding: 20rpx 0;
  }
}
</style>
